<template>

	<view class="index-content">
		<view class="lunbo">
				<view class="uni-padding-wrap">
					<view class="page-section swiper">
						<view class="page-section-spacing">
							<swiper class="swiper" :autoplay="true" :indicator-dots="true">
								<swiper-item>
									   <image class="swiper-img" src="https://img.picbling.cn/29ee0af6-da55-4a71-a6ea-cdd679f745cb.jpg-wechatApp800"></image>
								</swiper-item>
								<swiper-item>
									   <image class="swiper-img" src="https://img.picbling.cn/29ee0af6-da55-4a71-a6ea-cdd679f745cb.jpg-wechatApp800"></image>
								</swiper-item>
								<swiper-item>
									   <image class="swiper-img" src="https://img.picbling.cn/29ee0af6-da55-4a71-a6ea-cdd679f745cb.jpg-wechatApp800"></image>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>			
		</view>
		<view class="scroll-content">
				<scroll-view class="scroll-view" scroll-x="true" >
						<navigator  class="scroll-d1">
							<image src="https://img.picbling.cn/aab43cb0-e00e-456b-a233-c0d09210840f.jpg-PhotoThumb150" mode=""></image>
							<text class="scroll-text">蓝色幻想风</text>
						</navigator>
					<navigator  class="scroll-d1">
						
						<image src="https://img.picbling.cn/aab43cb0-e00e-456b-a233-c0d09210840f.jpg-PhotoThumb150" mode=""></image>
						<text class="scroll-text">蓝色幻想风</text>
					</navigator>
					<navigator  class="scroll-d1">
						
						<image src="https://img.picbling.cn/aab43cb0-e00e-456b-a233-c0d09210840f.jpg-PhotoThumb150" mode=""></image>
						<text class="scroll-text">蓝色幻想风</text>
					</navigator>
					<navigator  class="scroll-d1">
						
						<image src="https://img.picbling.cn/aab43cb0-e00e-456b-a233-c0d09210840f.jpg-PhotoThumb150" mode=""></image>
						<text class="scroll-text">蓝色幻想风</text>
					</navigator>
					<navigator  class="scroll-d1">
						
						<image src="https://img.picbling.cn/aab43cb0-e00e-456b-a233-c0d09210840f.jpg-PhotoThumb150" mode=""></image>
						<text class="scroll-text">蓝色幻想风</text>
					</navigator>
					<navigator  class="scroll-d1">
						
						<image src="https://img.picbling.cn/aab43cb0-e00e-456b-a233-c0d09210840f.jpg-PhotoThumb150" mode=""></image>
						<text class="scroll-text">蓝色幻想风</text>
					</navigator>
					<navigator  class="scroll-d1">
						
						<image src="https://img.picbling.cn/aab43cb0-e00e-456b-a233-c0d09210840f.jpg-PhotoThumb150" mode=""></image>
						<text class="scroll-text">蓝色幻想风</text>
					</navigator>
					<navigator  class="scroll-d1">
						
						<image src="https://img.picbling.cn/aab43cb0-e00e-456b-a233-c0d09210840f.jpg-PhotoThumb150" mode=""></image>
						<text class="scroll-text">蓝色幻想风</text>
					</navigator>
					<navigator  class="scroll-d1">
						
						<image src="https://img.picbling.cn/aab43cb0-e00e-456b-a233-c0d09210840f.jpg-PhotoThumb150" mode=""></image>
						<text class="scroll-text">蓝色幻想风</text>
					</navigator>
						
				</scroll-view>
		</view>
		<view class="afp-line">
			<text class='col-m1'>作品欣赏</text>
			<navigator url="" class=" icon iconfont icon-arrow-right">
			</navigator>
		</view>
		
		<view class="afp-w1">
			<navigator url="" class="afp-w1-content">
				<image src="https://img.picbling.cn/227759_1621672814497_21861862384163-WorkDetailBody" mode=""></image>
				<text class="words-normal">纯粹</text>
			</navigator>
			<navigator url="" class="afp-w1-content">
				<image src="https://img.picbling.cn/afe2a125-6370-4651-a4ec-de16e7f496c5-wechatApp800" mode=""></image>
				<text class="words-normal">纯粹</text>
			</navigator>
			<navigator url="" class="afp-w1-content">
				<image src="https://img.picbling.cn/227759_1621672814497_21861862384163-WorkDetailBody" mode=""></image>
					<text class="words-normal">纯粹</text>
			</navigator>
			<navigator url="" class="afp-w1-content">
				<image src="https://img.picbling.cn/227759_1621672814497_21861862384163-WorkDetailBody" mode=""></image>
				<text class="words-normal">纯粹</text>
			</navigator>
		
			
		</view>
		<view class="afp-line">
			<text class='col-m1'>服务套餐</text>
		<navigator url="" class=" icon iconfont icon-arrow-right">
		</navigator>
		</view>
		<view class="afp-w2">
			<navigator url="" class="afp-w2-content">
				<image src="https://img.picbling.cn/afe2a125-6370-4651-a4ec-de16e7f496c5-wechatApp800" mode=""></image>
				<text class="words-normal">纯粹</text>
				<text class="words-highlight">￥12800</text>
			</navigator>
			<navigator url="" class="afp-w2-content">
				<image src="https://img.picbling.cn/227759_1621649978834_3476098813010-wechatApp800" mode=""></image>
				<text class="words-normal">纯粹</text>
				<text class="words-highlight">￥12800</text>
			</navigator>
		
		</view>
		<view class="afp-line">
			<text class='col-m1'>视频展示</text>
		</view>
		<view class="afp-w3">
				<video class="afp-w3-video" :src="src"></video>
		</view>
		<end></end>
	</view>
</template>

<script>
	
	import  end from "../../components/contextend/contextend"; 
	export default {
		data() {
			return {
				src: 'https://media.izhaowo.com/media/f508e750-cab4-4c5b-818f-763e9ad45925.mp4',
				weixin:'18310595658',
				phone:'18310595658',
			}
		},
		onLoad() {
			
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '分享标题',
		      path: '/pages/index/index'
		    }
		  },
		methods: {
			
			
      },
	    components:{
			end:end
		}
	}
</script>

<style  lang="scss">
	
	
	.afp-line{
		padding: 10rpx 25rpx;
		display: flex;
		justify-content: space-between;
		font-weight: 700;
		color: #666;
		
	}
	
	
	.col-m1::before{
	  content: "";
	  border-left: 5rpx solid  green;
	  height: 30rpx;
	  margin-right: 10rpx;
	
	}
	
	::-webkit-scrollbar{  
	    display: none;  
	    width: 0 !important;  
	    height: 0 !important;  
	    -webkit-appearance: none;  
	    background: transparent;  
	}
	.index-content{
		
		.lunbo{
			.swiper{
				width: 750rpx;
				height:460rpx;
				.swiper-img{
					width: 100%;
					height: 100%;
				
				}
			}
			
		}
		.scroll-content{
			width: 100%;
			padding: 20rpx 0;
			.scroll-view{
				display: flex;
				flex-direction:column;
				white-space: nowrap;
				height: 200rpx;
				overflow: hidden;
				.scroll-d1{
					position: relative;
					margin: 25rpx 0;
					margin-left: 40rpx;
					display: inline-flex;
					flex-direction:column;
					justify-content:space-between;
					border: 8px solid hsl(0, 9%, 85%);
					border-radius: 50%;
					text-align: center;
					image{
						width: 80rpx;
						height: 80rpx;
						vertical-align: top;
						margin: 0 auto ;
						border-radius: 50%;
						box-shadow:5px 4px 10px #666 inset;
					}
					.scroll-text{
						position: absolute;
						font-size:20rpx;
						bottom: -60rpx ;
						left: -15rpx;
					}
				}
			}
		}
		.afp-w1{
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			 flex-wrap: wrap;
			.afp-w1-content{
				width: 45%;
				image{
					width: 100%;
					height: 300rpx;
				}
				
			}
		}
		.afp-w2{
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			 flex-wrap: wrap;
			.afp-w2-content{
				width: 45%;
				image{
					width: 100%;
					height: 300rpx;
				}
			
			}
		}
		.afp-w3{
			padding: 20rpx;
			.afp-w3-video{
				
				width: 100%;
				height: 400rpx;
			}
		}
	}
</style>
